<div bsModal #createOrEditModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="createOrEditModal"
  aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form *ngIf="active" #editForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">
        <div class="modal-header">
          <h4 class="modal-title">
              <span *ngIf="schedule.id">编辑日历</span>
              <span *ngIf="!schedule.id">创建新的日历</span>
          </h4>
          <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label class="control-label">工作日:</label>
                <div class="m-checkbox-inline">
                  <label class="m-checkbox m-checkbox--bold m-checkbox--state-success">
                    <input type="checkbox" name="workDay1" [(ngModel)]="workDays[0]"> 一
                    <span></span>
                  </label>
                  <label class="m-checkbox m-checkbox--bold m-checkbox--state-success">
                    <input type="checkbox" name="workDay2" [(ngModel)]="workDays[1]"> 二
                    <span></span>
                  </label>
                  <label class="m-checkbox m-checkbox--bold m-checkbox--state-success">
                    <input type="checkbox" name="workDay3" [(ngModel)]="workDays[2]"> 三
                    <span></span>
                  </label>
                  <label class="m-checkbox m-checkbox--bold m-checkbox--state-success">
                    <input type="checkbox" name="workDay4" [(ngModel)]="workDays[3]"> 四
                    <span></span>
                  </label>
                  <label class="m-checkbox m-checkbox--bold m-checkbox--state-success">
                    <input type="checkbox" name="workDay5" [(ngModel)]="workDays[4]"> 五
                    <span></span>
                  </label>
                  <label class="m-checkbox m-checkbox--bold m-checkbox--state-success">
                    <input type="checkbox" name="workDay6" [(ngModel)]="workDays[5]"> 六
                    <span></span>
                  </label>
                  <label class="m-checkbox m-checkbox--bold m-checkbox--state-success">
                      <input type="checkbox" name="workDay7" [(ngModel)]="workDays[6]"> 日
                      <span></span>
                    </label>
                </div>
              </div>

          <div class="form-group">
            <label style="display: block;">早班 *</label>
            <p-calendar name="zaoBanStart" [(ngModel)]="zaoBanStartDate" [timeOnly]="'true'" hourFormat="24" [inputStyleClass]="'form-control'" [inputStyle]="{'width':'360px','height':'40px', 'padding-left':'20px'}" required>
              </p-calendar>
              ---
              <p-calendar name="zaoBanEnd" [(ngModel)]="zaoBanEndDate" [timeOnly]="'true'" hourFormat="24" [inputStyleClass]="'form-control'" [inputStyle]="{'width':'360px','height':'40px', 'padding-left':'20px'}" required>
                </p-calendar>
          </div>

          <div class="form-group">
            <label style="display: block;">午班 *</label>
            <p-calendar name="zhongBanStart" [(ngModel)]="zhongBanStartDate" [timeOnly]="'true'" hourFormat="24" [inputStyleClass]="'form-control'" [inputStyle]="{'width':'360px','height':'40px', 'padding-left':'20px'}" required>
              </p-calendar>
              ---
              <p-calendar name="zhongBanEnd" [(ngModel)]="zhongBanEndDate" [timeOnly]="'true'" [inputStyleClass]="'form-control'" hourFormat="24" [inputStyle]="{'width':'360px','height':'40px', 'padding-left':'20px'}" required>
              </p-calendar>
          </div>

          <div class="form-group">
              <label style="display: block;">晚班 *</label>
              <p-calendar name="wanBanStart" [(ngModel)]="wanBanStartDate" [timeOnly]="'true'" [inputStyleClass]="'form-control'" hourFormat="24" [inputStyle]="{'width':'360px','height':'40px', 'padding-left':'20px'}" required>
                </p-calendar>
                ---
                <p-calendar name="wanBanEnd" [(ngModel)]="wanBanEndDate" [timeOnly]="'true'" [inputStyleClass]="'form-control'" [minDate]="wanBanStartDate" hourFormat="24" [inputStyle]="{'width':'360px','height':'40px', 'padding-left':'20px'}" required>
                </p-calendar>
            </div>

            <div class="form-group">
              <label style="display: block;">时间区间 *</label>
              <p-calendar [(ngModel)]="validTimeStart" name="validTimeStart" dateFormat="yy年m月d日" [locale]="primengCalendarHelper['zh-CN']" [utc]="'true'" [inputStyle]="{'width':'360px','height':'40px', 'padding-left':'20px'}" [inputStyleClass]="'form-control'" required></p-calendar>
              ---
              <p-calendar [(ngModel)]="validTimeEnd" [minDate]="validTimeStart" name="validTimeEnd" dateFormat="yy年m月d日" [locale]="primengCalendarHelper['zh-CN']" [utc]="'true'" [inputStyleClass]="'form-control'" [inputStyle]="{'width':'360px','height':'40px', 'padding-left':'20px'}"
                  required></p-calendar>
            </div>

          <div class="form-group">
            <label for="priority">优先级</label>
            <input id="priority" type="number" name="priority" class="form-control" [(ngModel)]="schedule.priority">
          </div>

          <div class="form-group">
            <label for="remark">备注</label>
            <textarea id="remark" class="form-control" type="text" name="remark" [(ngModel)]="schedule.remark" rows="3"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button [disabled]="saving" type="button" class="btn btn-default" (click)="close()">{{l("Cancel")}}</button>
          <button type="submit" class="btn btn-primary" [disabled]="!editForm.form.valid" [buttonBusy]="saving"
            [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i> <span>{{l("Save")}}</span></button>
        </div>
      </form>
    </div>
  </div>
</div>
